<template>
    <div id="login" class="bg">
        <el-row>
            <el-col :xs="{span:24}" :sm="{span:18,push:3}" :md="{span:14,push:3}" :lg="{span:5,push: 13}" class="lbody">
                <el-form :model="user" :rules="logrules" ref="user">
                    <el-row>
                        <el-col :span="24"><span class="ltxt">登录</span></el-col>
                        <el-col :span=24>
                            <el-form-item prop="name" label-width="0px">
                                <el-input :placeholder="userplace" :icon="uclose" :on-icon-click="cleanuser"
                                          v-model="user.name">
                                    <template slot="prepend"><i class="icon iconfont">&#xe607;</i></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="pwd" label-width="0px">
                                <el-input :placeholder="pwdplace" :icon="pclose" :on-icon-click="cleanpwd"
                                          v-model="user.pwd"
                                          type="password">
                                    <template slot="prepend"><i class="icon iconfont">&#xe621;</i></template>
                                </el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span=15>
                            <el-form-item prop="code" label-width="0px">
                                <el-input :placeholder="codeplace" :icon="cclose" :on-icon-click="cleancode"
                                          v-model="user.code" :maxlength="4">
                                    <template slot="prepend"><i class="icon iconfont">&#xe60d;</i></template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!--验证码-->
                        <el-col :span="6" :push="1">
                            <img :src="yzmurl" @click="reyzm()" class="yzm" alt="点击换一张" title="点击换一张">
                        </el-col>
                        <!--登录按钮-->
                        <el-col :span="17">
                            <el-button class="btn" @click="login('user')" type="primary">{{logbtn}}</el-button>
                        </el-col>
                        <el-col :span=6 :push=1>
                            <el-button class="btn" @click="msgzc()">{{regbtn}}</el-button>
                        </el-col>
                        <el-col :span="22" :push="1" class="textright">
                            <span><a href="javascript:;" @click="msgzmm()" class="link">{{repwd}}</a></span>
                        </el-col>
                        <el-col>
                            测试账号 <br>
                            用户名:root 密码:123456 <br>
                            用户名:daizg 密码:123456 <br>
                            用户名:zyut 密码:123456 <br>
                        </el-col>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <div style="display: none">{{routermain}}</div>
    </div>
</template>

<script>
    export default {
        name: 'login',
        data() {
            var checkpwd = (rule, value, callback) => {
                if (this.user.pwd === '') {
                    callback(new Error('请输入密码'))
                } else if (this.user.pwd.length < 6) {
                    callback(new Error('密码为6位以上字符串'))
                } else {
                    callback()
                }
            }
            var checkname = (rule, value, callback) => {
                if (this.user.name === '') {
                    callback(new Error('请输入用户名'))
                } else if (this.user.name.length < 4) {
                    callback(new Error('用户名为4位以上字符串'))
                } else {
                    callback()
                }
            }
            var checkcode = (rule, value, callback) => {
                if (this.user.code === '') {
                    callback(new Error('请输入验证码'))
                } else if (this.user.code.length !== 4) {
                    callback(new Error('验证码为4位字符串'))
                } else {
                    $.post(
                        '/chat/php/ajax/checkyzm.php',
                        {
                            yzm: this.user.code
                        }
                        ,
                        function (data) {
                            if (data.state === 0) {
                                callback(new Error('验证码不对'))
                            } else {
                                callback()
                            }
                        }, 'json'
                    )
                }
            }
            return {
                time: 0,
                logrules: {
                    pwd: [
                        {validator: checkpwd, trigger: 'blur'}
                    ],
                    name: [
                        {validator: checkname, trigger: 'blur'}
                    ],
                    code: [
                        {validator: checkcode, trigger: 'blur'}
                    ]
                },
                yzm: {
                    url: '/chat/php/yzm.php?round=',
                    rp: 'default'
                },
                repwd: '忘记密码',
                logbtn: '登录',
                regbtn: '注册',
                user: {
                    name: 'root',
                    pwd: '123456',
                    code: ''
                },
                pwdplace: '请输入密码',
                userplace: '请输入用户名',
                codeplace: '请输验证码',
                close: 'circle-cross',
                pop: {
                    title: '',
                    width: '',
                    ref: '',
                    content: '',
                    status: false
                }
            }
        },
        computed: {

            yzmurl: function () {
                return this.yzm.url + this.yzm.rp
            },
            uclose: function () {
                return this.user.name.length !== 0 ? 'circle-cross' : ''
            },
            pclose: function () {
                return this.user.pwd.length !== 0 ? 'circle-cross' : ''
            },
            cclose: function () {
                return this.user.code.length !== 0 ? 'circle-cross' : ''
            },
            routermain: function () {
                let message
                if (this.$store.state.wsst === 2) {
                    this.msgloginsuccess()
                    this.$router.push('/main')
                    message = '登录成功'
                } else if (this.$store.state.wsst === 1) {
                    message = '认证中'
                } else {
                    message = '登录失败'
                }
                return message
            }
        },
        methods: {
            msgzc: function () {
                this.$message('注册功能还未开放哦')
                return false
            }, msgzmm: function () {
                this.$message('暂时还不可以找会密码')
                return false
            }, msgloginsuccess: function () {
                this.$message({
                        message: '登录成功',
                        type: 'success'
                    }
                )
                return false
            },
            cleanuser: function () {
                this.user.name = ''
            },
            cleanpwd: function () {
                this.user.pwd = ''
            },
            cleancode: function () {
                this.user.code = ''
            },
            rmpop: function () {
                this.pop.status = false
            },
            checkuser: function () {
                this.pop.ref = ''
            },
            login: function (refname) {
                this.$refs[refname].validate((valid) => {
                    if (valid) {
                        let self = this
                        $.post(
                            '/chat/php/ajax/login.php',
                            {
                                yzm: this.user.code,
                                name: this.user.name,
                                pwd: this.user.pwd
                            }, (data) => {
                                self.$store.commit('setwsurl', data.wsurl)
                                self.$store.commit('settoken', data.token)
                                self.$store.commit('linkws')
                                self.$store.dispatch('wsopen')
                            }, 'json'
                        )
                    } else {
                        return false
                    }
                })
            },
            reyzm: function () {
                this.yzm.rp = Math.random()
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


    .bg {
        height: 100%;
        width: 100%;

        background-size: cover;
    }

    .lbody {
        background: rgba(0, 0, 0, .4);
        padding: 5px;

    }

    .ltxt {
        color: rgba(31, 31, 31, 0.75);
        font-size: 26px;
    }

    .icon {
        font-size: 20px;
    }

    .btn {
        width: 100%;
    }

    .link {
        color: royalblue;
        text-decoration: none;
    }

    .yzm {
        height: 34px;
    }

    @media (max-width: 768px) {
        .bg {
            background-image: url("/chat/static/img/loginbg4.jpg");
        }

        .lbody {
            margin-top: 20%;
        }
    }

    @media (min-width: 768px) {
        .bg {
            background-image: url("/chat/static/img/loginbg3.jpg");
        }

        .lbody {
            margin-top: 20%;
        }
    }

    @media (min-width: 992px) {
        .bg {
            background-image: url("/chat/static/img/loginbg2.jpg");
        }

        .lbody {
            margin-top: 20%;
        }
    }

    @media (min-width: 1200px) {
        .bg {
            background-image: url("/chat/static/img/loginbg.jpg");
        }

        .lbody {
            margin-top: 20%;
        }
    }
</style>
